import React from "react";
import { Card, Avatar, Tag, Button, message } from "antd";
import { UserOutlined, SendOutlined } from "@ant-design/icons";
import { participateJobApi } from "../../../api/jobSeeker";
import "../../../assets/style/jobList.css";

const JobList = ({ jobs }) => {
  const handleParticipate = async (jobId) => {
    try {
      await participateJobApi(jobId);
      message.success("投递成功");
    } catch (error) {
      if (error.response?.status === 404) {
        message.error("该职位不存在");
      } else if (error.response?.status === 400) {
        message.error("您已经投递过该职位");
      } else {
        message.error("投递失败，请重试");
      }
    }
  };

  return (
    <div className="job-list">
      {jobs.map((job) => (
        <div key={job.job_id} className="job-card">
          <div className="job-card-hover">
            <Button
              type="primary"
              icon={<SendOutlined />}
              className="participate-btn"
              onClick={() => handleParticipate(job.job_id)}
            >
              立即投递
            </Button>
          </div>

          {/* 职位标题行 */}
          <div className="job-header">
            <h3 className="job-title">{job.job_name}</h3>
            <span className="job-salary">{job.salary}k/月</span>
          </div>

          {/* 公司信息行 */}
          <div className="company-info">
            <span className="company-name">{job.company}</span>
            <div className="company-meta">
              <span>{job.company_size}人</span>
              <span>{job.company_industry}</span>
              <span>{job.company_address}</span>
            </div>
          </div>

          {/* 职位描述 */}
          <div className="job-requirements">{job.detail}</div>

          {/* 联系人信息 */}
          <div className="contact-info">
            <div className="contact-person">
              <Avatar icon={<UserOutlined />} />
              <div>
                <div className="contact-name">{job.head}</div>
                <div className="contact-title">{job.posts}</div>
              </div>
            </div>
            <span className="update-time">
              {new Date(job.updated_at).toLocaleDateString()}
            </span>
          </div>

          {/* 标签 */}
          <div className="job-tags">
            <Tag color="blue">在招</Tag>
            {job.company_email && <Tag color="green">可直接沟通</Tag>}
          </div>
        </div>
      ))}
    </div>
  );
};

export default JobList;
